<!--
*
*就诊记录
*
 -->
<template>
  <div class="bg">
    <div>
      <div class="nav-title">
        <ul>
          <li
            v-for="(item, index) in titleList"
            :key="index"
            :class="{ active: active == index }"
            @click="switchTab(index)"
          >
            {{ item.val }}
          </li>
        </ul>
      </div>
      <div class="med-content" v-if="list.length > 0">
        <ul>
          <li v-for="item in list" :key="item.orderId">
            <div class="left">
              <div class="title" v-if="item.treatStatus == 1">已受理</div>
              <div class="title" v-if="item.treatStatus == 2">已取消</div>
              <div class="title" v-if="item.treatStatus == 3">停诊</div>
              <div class="title" v-if="item.treatStatus == 4">已完成</div>
              <div
                class="title"
                v-if="item.treatStatus == 5"
                style="color: red"
              >
                违约
              </div>
              <div class="hospitalname">
                {{ item.hospitalName }} {{ item.departmentName }}
              </div>
              <div class="time">
                {{ item.treatDate }} <span>{{ item.week }}</span
                ><span>{{ item.sourceTypeName }}</span>
              </div>
            </div>
            <div class="right" @click="goInfo(item.orderId)">查看详情</div>
          </li>
        </ul>
      </div>
      <div v-else>
        <div class="box">
          <img src="../../assets/img/main/empty.png" alt="" />
          <div>暂时没有预约记录</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { orderRecordApi } from "@/service/api.js";
import { Dialog, Toast } from "vant";
import conCom from "./components/conCom";
import { loginByWxOpenidApi } from "@/service/api.js";
export default {
  name: "medicalRecord",
  inject: ["reload"],
  data() {
    return {
      token: "",
      hiorwr: 1,
      list: [],
      orderid: "",
      list2: [],
      titleList: [{ val: "当前预约" }, { val: "历史预约" }],
      isEmpty: false,
      active: 0
    };
  },
  components: {
    conCom
  },
  mounted() {
    this.getData();
  },
  created() {
    // 拿取apptoken
    localStorage.getItem("apptoken"),
      (this.apptoken = JSON.parse(localStorage.getItem("apptoken"))),
      localStorage.setItem("apptoken1", this.apptoken);
    console.log(this.apptoken);
    // 拿取token
    this.token = localStorage.getItem("token");
    console.log("token", this.token);

    this.getorderList();

    //获取订单信息
  },
  mounted() {
    // 如果支持 popstate 一般移动端都支持了
    if (window.history && window.history.pushState) {
      // 往历史记录里面添加一条新的当前页面的url
      history.pushState(null, null, document.URL);
      // 给 popstate 绑定一个方法 监听页面刷新
      window.addEventListener("popstate", this.backChange, false); //false阻止默认事件
    }
  },
  destroyed() {
    window.removeEventListener("popstate", this.backChange, false); //false阻止默认事件
  },
  methods: {
    backChange() {
      const that = this;
      console.log("监听到了");
      this.$router.replace({
        name: "Home"
      });
    },
    getorderList() {
      this.hiorwr = 1;
      orderRecordApi({
        token: this.token,
        apptoken: this.apptoken
        // hospitalId: "402882687602384101760267eebc0092",
      }).then(res => {
        if (res.code == 4000) {
          console.log(res);
          this.list = res.data.waitTreatOrders;
          console.log(this.list);
        } else {
          if (res.code == 4002) {
            window.localStorage.removeItem("token");

            Dialog.confirm({
              title: "提示",
              message: "需前往登录页面完成登录"
            })
              .then(() => {
                this.$router.push({
                  name: "login"
                });
                // on confirm
              })
              .catch(() => {
                // on cancel
              });
          } else {
            Toast(res.msg);
          }
        }
      });
    },
    // 查看详情
    goInfo(id) {
      this.orderid = id;
      this.$router.push({
        name: "Xq_appoint",
        query: {
          orderid: this.orderid,
          hiorwr: this.hiorwr
        }
      });
    },
    switchTab(val) {
      console.log(val);
      this.active = val;
      console.log(this.active);
      if (val == 0) {
        this.hiorwr = 1;
        orderRecordApi({
          token: this.token,
          apptoken: this.apptoken
          // hospitalId: "402882687602384101760267eebc0092",
        }).then(res => {
          if (res.code == 4000) {
            console.log(res);
            this.list = res.data.waitTreatOrders;
            console.log(this.list);
          } else {
            if (res.code == 4002) {
              window.localStorage.removeItem("token");

              Dialog.confirm({
                title: "提示",
                message: "需前往登录页面完成登录"
              })
                .then(() => {
                  this.$router.push({
                    name: "login"
                  });
                  // on confirm
                })
                .catch(() => {
                  // on cancel
                });
            } else {
              Toast(res.msg);
            }
          }
        });
      } else if (val == 1) {
        this.hiorwr = 2;
        orderRecordApi({
          token: this.token,
          apptoken: this.apptoken
          // hospitalId: "402882687602384101760267eebc0092",
        }).then(res => {
          console.log(res);
          if (res.code == 4000) {
            this.list = res.data.hisTreatOrders;
            console.log(this.list);
          } else {
            if (res.code == 4002) {
              window.localStorage.removeItem("token");
              Dialog.confirm({
                title: "提示",
                message: "需前往登录页面完成登录"
              })
                .then(() => {
                  this.$router.push({
                    name: "login"
                  });
                  // on confirm
                })
                .catch(() => {
                  // on cancel
                });
            } else {
              Toast(res.msg);
            }
          }
        });
      }
    },
    getData() {}
  }
};
</script>
<style scoped lang="scss">
.bg {
  background: #f6f6f6;
}
.box {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  top: 30%;
  bottom: 0;
  margin: auto;
  img {
    width: 5.5rem;
    height: 4rem;
  }
  div {
    margin-top: 0.3rem;
    font-size: 0.4rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #c4c4c4;
  }
}
.med-content {
  padding-top: 1rem;
  ul {
    li {
      width: 100%;
      display: flex;
      justify-content: space-between;
      background: #ffffff;
      margin-bottom: 0.2rem;
      padding-bottom: 0.3rem;

      .left {
        width: 70%;
        margin-left: 0.2rem;
        .title {
          font-size: 0.4rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #07c6b4;
          padding-top: 0.2rem;
          margin-bottom: 0.2rem;
        }
        .hospitalname {
          font-size: 0.35rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
          margin-bottom: 3.2px;
        }
        .time {
          font-size: 0.35rem;
          font-family: PingFang SC;
          font-weight: 500;
          color: #333333;
        }
      }
      .right {
        margin-top: 0.4rem;
        margin-right: 0.2rem;
        width: 1.8rem;
        height: 0.8rem;
        background: #07c6b4;
        border-radius: 10px;
        font-size: 0.35rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        text-align: center;
        line-height: 0.8rem;
      }
    }
  }
}
.nav-title {
  position: fixed;
  width: 10rem;
  height: 1rem;
  background: #eeeeee;
  ul {
    height: 1rem;
    font-size: 0.42rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: #333333;
    display: flex;
    justify-content: space-around;
    align-items: center;
    .active {
      color: #07c6b4;
    }
  }
}
</style>
